{% extends "standard.html" %}

{% block extra_head %}
	<link rel="stylesheet" href="{{MEDIA_URL}}css/default.css" type="text/css" />
   <script type="text/javascript">
	   /* 
	   Loads a div with the result of an Ajax Updater request (via Prototype.js).
	   div_target (string): ID of the <div> tag whose contents will be updated.
	   url (string): The URL to request and update into the <div> from.
		*/
		function load_div(div_target, url) {
		   new Ajax.Updater(div_target, url);
		} // end load_div()
		  
   		function load_song_queue() {
 			load_div("song_queue", "{% url music_player-display_song_queue_div %}");
		}

   		function load_song_search() {
 			load_div("song_search", "{% url music_player-song_search_div %}");
		}

   		function load_song_search_results() {
 			load_div("song_search_results", "{% url music_player-ajax-song_search_results %}");
		}
		
   		function request_song(song_id) {
			/*
			 * Fired when he user hits the Search button. Calls the validator
			 * and sends off an AJAX request if all is good.
			 */             
			new Ajax.Request('/request_song/' + song_id +'/', {
			    onSuccess: function(http_req) {
			        // Get a JSON object from the response string (from the server).
			        jsobj = http_req.responseText.evalJSON();
			        // See if there was a form processing error.
			        if (jsobj["is_error"] == false) {
			        	load_song_queue()
			        } else {
			            // Form validation error happened.
			            alert(jsobj["message"]);
			        }
			    },
			    onComplete: function() {
			}});
		}

		function periodically_update_queue() {
			new Ajax.PeriodicalUpdater('song_queue', 
					'{% url music_player-display_song_queue_div %}', {
				  method: 'get', frequency: 8, decay: 1
				});
			new Ajax.PeriodicalUpdater('currently_playing', 
                    '{% url music_player-display_currently_playing_div %}', {
                  method: 'get', frequency: 8, decay: 1
                }); 		
		}
		
		function search_request() {
			/*
			 * Fired when he user hits the Search button. Calls the validator
			 * and sends off an AJAX request if all is good.
			 */             
			new Ajax.Updater('song_search_results', 
					'{% url music_player-ajax-song_search_results %}', {
			    method: 'POST',
			    parameters: Form.serialize('song_form'),
			    onSuccess: function(http_req) {
			        // Get a JSON object from the response string (from the server).
			        jsobj = http_req.responseText.evalJSON();
			        // See if there was a form processing error.
			        if (jsobj["is_error"] == false) {
			        	
			        } else {
			            // Form validation error happened.
			            alert(jsobj["message"]);
			        }
			    },
			    onComplete: function() {
			}});
		}

	    function rating_change_handler(song_id) {
		    if (song_id < 1)
			    return;

		    var rating_value = $('id_rating').value;
		    if (rating_value < 1)
			    // If the rating is less than 1, the user has selected the
			    // dashed default option. This is analogous to a null rating.
			    // Server understands that 0 == None for ratings.
			    rating_value = 0;
		    new Ajax.Request('/rate_song/' + song_id +'/'+ rating_value +'/');
	    }
		
   		function on_load() { 
            {% if request.GET.msg %}
            alert("{{request.GET.msg}}");
            {% endif %}
   			load_song_queue();
   			load_song_search();
   			load_song_search_results();
   			periodically_update_queue();
		}

		window.onload=on_load();
		
   </script> 
{% endblock %} 

{% block body %}
<div id="currently_playing" class="yui-g">
    {% include "currently_playing.html" %}
</div>
<div id="yui-main">
	<div class="yui-b">
		<div id="song_search" class="yui-g">
			{% include "song_search.html" %}
		</div>
		<div id="song_search_results" class="yui-g">
			{% include "song_results.html" %}
		</div>
		<div id="upload_tool" class="yui-g">
		{% include "song_upload.html" %}
		</div>
	</div>
</div>
<div id="song_queue" class="yui-b">
	{% include "song_list.html" %}
</div>
{% endblock %}